<template>
  <div id="usermsg" class="usermsg">
    <yd-navbar slot="navbar" fixed>
      <router-link to="/user" slot="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </router-link>
      <span slot="center" style="font-size:18px">修改资料</span>
    </yd-navbar>

    <div class="content-usermsg" fixed>
      <div class="touxiang">
        <router-link to="/user/uploadPhoto">
          <img :src="userData.photo">
        </router-link>      
        <span style="border-right: solid 1px #fff; margin-top:15px;">积分: {{userData.point}}</span><span>余额: {{userData.wallet}}￥</span>
      </div>
      <yd-cell-group>

        <yd-cell-item>
          <span slot="left">用户名：</span>
          <yd-input slot="right" v-model="userData.username" max="20" :placeholder="userData.username" :showSuccessIcon="false"></yd-input>
        </yd-cell-item>
        <!--
        <yd-cell-item>
          <span slot="left">性别：</span>
          <select slot="right">
                <option value=""> 女</option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        </yd-cell-item>
        -->
        <yd-cell-item>
          <span slot="left">手机号：</span>
          <yd-input slot="right" v-model="userData.phone" ref="mobile" regex="mobile" placeholder="未绑定" :showSuccessIcon="false">{{userData.phone}}</yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">邮箱：</span>
          <yd-input slot="right" v-model="userData.email" :debug="true" regex="email" placeholder="未绑定" :showSuccessIcon="false"></yd-input>
        </yd-cell-item>
      </yd-cell-group>

      <yd-accordion>
        <yd-accordion-item title="消费情况(月)">
          <div style="padding: .24rem;">
            <p>花间一壶酒，独酌无相亲。</p>
          </div>
        </yd-accordion-item>
        <yd-accordion-item title="收支情况(月)">
          <div style="padding: .24rem;">
            <p>花间一壶酒，独酌无相亲。</p>
          </div>
        </yd-accordion-item>
        <yd-accordion-item title="理财情况(月)">
          <div style="padding: .24rem;">
            <p>花间一壶酒，独酌无相亲。</p>
          </div>
        </yd-accordion-item>
      </yd-accordion>
      <div class="space-10"></div>
      <yd-button size="large" bgcolor="#2196f3" color="#fff" @click.native="setData">保存</yd-button>
    </div>

  </div>
</template>

<script>
  import axios from '../../axios'
  import baseService from '../../axios/'

  export default {
    name: 'usermsg',
    data() {
      return {
        msg: '',
        userData: {
          username: '',
          photo: '',
          wallet: '',
          point: '',
          phone: '',
          email: ''
        }
      }
    },
    mounted() {
      this.getInformation()
    },
    methods: {
      getInformation() {
        baseService.post('user/getInformation.do').then((res) => {
          if (res.data.status == 0) {
            this.userData = res.data.data;
            console.log(this.userData)
            // todo 头像上传，头像没有值的情况下默认显示；
          }
        })
      },
      setData: function () {
        let param = new URLSearchParams();      
        let username = this.userData.username;
        let email = this.userData.email;
        let phone = this.userData.phone;
        let photo = this.userData.photo; 
        param.append("username", username);
        param.append("email", email);
        param.append("phone", phone);
        baseService.post('/user/updateInformation.do', param).then((res) => {
          if (res.data.status == 0) {
            // console.log(res.data.data)
          this.$dialog.alert({
            mes: res.data.msg
          });
          this.getInformation();
          }

        })
      }
    }
  }

</script>

<style>
  .usermsg .content-usermsg {
    position: fixed;
    padding-top: 13%;
    height: 100%;
    width: 100%;
    overflow-y: auto !important;
  }

  .usermsg .content-usermsg .touxiang {
    height: 20%;
    text-align: center;
    padding-top: 10px;
  }

  .usermsg .content-usermsg .touxiang img {
    width: 18%;
    height: 60%;
    margin: 0px auto;
    border: solid 2px #fff;
    border-radius: 50%;
  }

  .touxiang span {
    display: inline-block;
    width: 80px;
  }

  .yd-accordion-title>span {
    text-align: left;
  }

</style>
